<template>
  <div>
    <el-row>
      <el-col :offset="1" :span="11">
        <el-card style="padding:40px 40px 20px 20px; height: 82vh; overflow: auto;">
          <el-table :data="typeList" style="width: 100%" v-loading="loading">
            <el-table-column prop="type_number" label="权限序号" width="80"></el-table-column>
            <el-table-column prop="type_name" label="权限名称" width="180"></el-table-column>
            <el-table-column prop="type_role" label="权限内容" width="280"></el-table-column>
            <el-table-column label="编辑">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="remove(scope.row)"
                  style="margin:5px 0 0 0"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br />
          <!-- 分列 -->
          <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="currentPage"
          ></el-pagination>-->
        </el-card>
      </el-col>

      <el-col :offset="1" :span="10">
        <el-card style="padding:40px 40px 20px 20px; height: 82vh">
          <div slot="header" class="clearfix">
            <span>
              <strong>新建权限类别</strong>
            </span>
          </div>

          <el-form
            ref="form"
            :model="model"
            @submit.native.prevent="save"
            label-width="100px"
            style="max-width: 800px;"
          >
            <el-form-item label="权限类别名称">
              <el-input v-model="model.type_name" required clearable placeholder="(例) 管理员"></el-input>
            </el-form-item>
            <el-form-item label="权限类别内容">
              <el-input v-model="model.type_role" required clearable placeholder="可对所有的数据进行增删改查操作"></el-input>
            </el-form-item>
            <el-form-item label="权限类别序号">
              <el-input v-model="model.type_number" required clearable placeholder="(例) 01"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit">立即创建</el-button>
              <el-button @click="cancel" :plain="true">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {},
      loading: true,
      typeList: null, //为了判断是否为空
      // 下面是pagination的值
      total: 9,
      currentPage: 1,
      pageSize: 1
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    cancel() {
      this.model = {};
    },
    //获取列表
    async fetch() {
      const type_list = await this.$http.get("rest/type_list");
      this.typeList = type_list.data;
      this.loading = false;
    },
    async save() {
      let flag = this.typeList.every(item => {
        return (
          item.type_name != this.model.type_name &&
          item.type_number != this.model.type_number
        );
      });

      if (flag) {
        const response = await this.$http.post("rest/add_type", this.model);
        this.model = {};
        this.fetch();

        this.$message({
          type: "success",
          message: "保存成功",
          duration: 2000
        });
      } else {
        this.$message({
          type: "warning",
          message: "已存在该内容",
          duration: 2000
        });
      }
    },
    //删除
    remove(row) {
      this.$confirm(`是否删除?"${row.name}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`rest/type/${row._id}`);
        this.$message({
          type: "success",
          message: "删除成功!"
        });

        this.fetch();
      });
    },
    //分列
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    }
  }
};
</script>

<style lang="less" scoped>
.clearfix:after {
  clear: both;
}
</style>